<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables">

<head th:fragment="header">

<title th:text="title"></title>

<link rel="stylesheet"
	th:href="@{/webjars/bootstrap/2.3.2/css/bootstrap.min.css}" />

<link rel="stylesheet"
	th:href="@{/webjars/bootstrap/2.3.2/css/bootstrap-responsive.min.css}" />


<link rel="stylesheet"
	th:href="@{/webjars/font-awesome/4.0.0/css/font-awesome.min.css}" />

<link rel="stylesheet"
	th:href="@{/webjars/jasny-bootstrap/2.3.0-j5/css/jasny-bootstrap.min.css}" />

<link rel="stylesheet"
	th:href="@{/webjars/jasny-bootstrap/2.3.0-j5/css/jasny-bootstrap-responsive.min.css}" />

<link rel="stylesheet"
	th:href="@{/webjars/bootstrap-extn/1.0/css/bootstrap-slider.css}" />

<script type="text/javascript"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>

<script type="text/javascript"
	th:src="@{/webjars/jquery-ui/1.9.0/js/jquery-ui-1.9.0.custom.min.js}"></script>

<script type="text/javascript"
	th:src="@{/webjars/datatables/1.9.4/media/js/jquery.dataTables.min.js}"></script>


<script type="text/javascript"
	th:src="@{/webjars/bootstrap/2.3.2/js/bootstrap.min.js}"></script>

<script type="text/javascript"
	th:src="@{/webjars/jasny-bootstrap/2.3.0-j5/js/jasny-bootstrap.min.js}"></script>

<script type="text/javascript"
	th:src="@{/webjars/bootstrap-extn/1.0/js/bootstrap-slider.js}"></script>

<style>
body {
	padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
}

.navbar-custom1 .navbar-inner {
	background-color: #DD2222;
	background-image: none;
}

.navbar-custom1 .dropdown-menu {
	background-clip: padding-box;
	background-color: red;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px 6px 6px 6px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	display: none;
	float: left;
	left: 0;
	list-style: none outside none;
	margin: 2px 0 0;
	min-width: 160px;
	padding: 5px 0;
	position: absolute;
	top: 100%;
	z-index: 1000;
}

.navbar-custom1 .btn-group.open .btn.dropdown-toggle {
	background-color: red;
}

.navbar-custom1 .btn-group.open .btn.dropdown-toggle {
	background-color: lime;
}

.navbar-custom1  .nav li.dropdown.open>.dropdown-toggle,.navbar-custom1  .nav li.dropdown.active>.dropdown-toggle,.navbar-custom1  .nav li.dropdown.open.active>.dropdown-toggle
	{
	color: white;
	background-color: Teal;
}

.navbar-custom1  .nav>li>a {
	color: white;
	float: none;
	padding: 10px 15px;
	text-decoration: none;
	text-shadow: 0 0px 0 #ffffff;
}

.navbar-custom1  .brand {
	display: block;
	float: left;
	padding: 10px 20px 10px;
	margin-left: -20px;
	font-size: 20px;
	font-weight: 200;
	color: white;
	text-shadow: 0 0px 0 #ffffff;
}

.navbar-custom1 .nav>li>a:focus,.navbar-custom1 .nav>li>a:hover {
	color: white;
	text-decoration: none;
	background-color: transparent;
}

.navbar-custom1 .navbar-text {
	margin-bottom: 0;
	line-height: 40px;
	color: white;
}

.navbar-custom1 .dropdown-menu li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 20px;
	color: white;
	white-space: nowrap;
}

.navbar-custom1 .navbar-link {
	color: white;
}

.navbar-custom1 .navbar-link:hover {
	color: white;
}

.top-buffer {
	margin-top: 20px;
}

.form-horizontal .control-label {
	width: 70px;
}

.form-horizontal .controls {
	margin-left: 90px;
}



.panel {
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
  padding: 15px;
}
.panel-body:before,
.panel-body:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.panel-body:after {
  clear: both;
}
.panel > .list-group {
  margin-bottom: 0;
}
.panel > .list-group .list-group-item {
  border-width: 1px 0;
}
.panel > .list-group .list-group-item:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.panel > .list-group .list-group-item:last-child {
  border-bottom: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}
.panel > .table {
  margin-bottom: 0;
}
.panel > .panel-body + .table {
  border-top: 1px solid #dddddd;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}
.panel-title > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
  overflow: hidden;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
  border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #dddddd;
}
.panel-default {
  border-color: #dddddd;
}
.panel-default > .panel-heading {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #dddddd;
}
.panel-default > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #dddddd;
}
.panel-default > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #dddddd;
}
.panel-primary {
  border-color: #428bca;
}
.panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}
.panel-primary > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #428bca;
}
.panel-primary > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #428bca;
}
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #d6e9c6;
}
.panel-success > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #d6e9c6;
}
.panel-warning {
  border-color: #fbeed5;
}
.panel-warning > .panel-heading {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #fbeed5;
}
.panel-warning > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #fbeed5;
}
.panel-warning > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #fbeed5;
}
.panel-danger {
  border-color: #eed3d7;
}
.panel-danger > .panel-heading {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}
.panel-danger > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #eed3d7;
}
.panel-danger > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #eed3d7;
}
.panel-info {
  border-color: #bce8f1;
}
.panel-info > .panel-heading {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #bce8f1;
}
.panel-info > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #bce8f1;
}

.panel-heading > h3 {line-height:20px;}


</style>



</head>

<body>

	<div class="navbar navbar-fixed-top navbar-custom1"
		th:fragment="topnav">
		<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand pull-left" href="#">XYZ</a>
				<div class="nav-collapse collapse">
					<ul class="nav" th:each="m : ${@moduleManager.getModules()}">
						<li><a th:href="${m.url}"><i class="fa fa-book"></i><span
								th:text="${m.name}"></span></a></li>

					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>


	<footer class="footer hidden-print" th:fragment="footer">
		<div class="container text-center">
			<div>
				<i class="icon-flag"></i> Font Awesome 3.2.1 <span
					class="hidden-phone">&middot;</span><br class="visible-phone"/>
				Created and Maintained by <a href="http://twitter.com/davegandy">Dave
					Gandy</a>
			</div>
			<div>
				Font Awesome licensed under <a href="http://scripts.sil.org/OFL">SIL
					OFL 1.1</a> <span class="hidden-phone">&middot;</span>
					<br class="visible-phone"/> Code licensed under <a
					href="http://opensource.org/licenses/mit-license.html">MIT
					License</a> <span class="hidden-phone hidden-tablet">&middot;</span>
					<br
					class="visible-phone visible-tablet" /> Documentation licensed
				under <a href="http://creativecommons.org/licenses/by/3.0/">CC
					BY 3.0</a>
			</div>
			<div>
				Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i>
					MaxCDN</a> for providing the excellent <a
					href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN
					for Font Awesome</a>
			</div>
			<div class="project">
				<a href="https://github.com/FortAwesome/Font-Awesome">GitHub
					Project</a> &middot; <a
					href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a>
			</div>
		</div>
	</footer>


</body>

</html>